<template>
    <div class="tab-cont">
      <custom-title name="流程实例列表" />
      <el-table :data="list" @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" width="45" />
        <el-table-column label="ID" align="center" prop="id" sortable show-overflow-tooltip />
        <el-table-column label="实例名称" align="center" prop="name" sortable show-overflow-tooltip />
        <el-table-column label="实例创建时间" align="center" prop="startDate" show-overflow-tooltip />
        <el-table-column label="流程定义编号" align="center" prop="processDefinitionId" show-overflow-tooltip />
        <el-table-column label="流程定义KEY" align="center" prop="processDefinitionKey" show-overflow-tooltip />
        <el-table-column label="版本" align="center" prop="processDefinitionVersion" width="80px" />
        <el-table-column label="操作" align="center" prop="name" width="260px">
          <template slot-scope="{ row }">
            <el-button v-if="row.status === 'RUNNING'" type="primary" size="mini" @click="handleInfo('hangUp', row)">挂起</el-button>
            <el-button v-else type="primary" size="mini" @click="handleInfo('active', row)">激活</el-button>
            <el-button type="primary" size="mini" class="mx-2" @click="handleInfo('look', row)">历史</el-button>
            <el-button type="danger" size="mini" @click="handleInfo('delete', row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-if="list.length" :current-page="form.pageNum" :total="total" :page-size="form.pageSize" @changeData="getInstances" />
    </div>
  </template>
  
  <script>
  import { getInstances, suspendInstance, resumeInstance, deleteInstance } from '@/api/process'
  export default {
    data() {
      return {
        form: {
          pageNum: 1,
          pageSize: 10
        },
        total: 0,
        list: [],
        tabItem: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.getInstances()
      })
    },
    methods: {
      // 列表复选框操作
      handleSelectionChange(item) {
        console.log(item)
      },
      handleInfo(typ, row) {
        this.tabItem = row
        if (typ === 'hangUp') { // 挂起
          this.$confirm('确定要挂起该流程吗?', '信息', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.suspendInstance()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消挂起'
            })        
          })
        } else if (typ === 'active') { // 激活
          this.$confirm('确定要激活该流程吗?', '信息', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.resumeInstance()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消激活'
            })        
          })
        } else if (typ === 'look') { // 历史
          window.open('http://localhost:89/bpmnjs/dist/index.html?type=lookBpmn&instanceId='+row.id+'&deploymentFileUUID='+row.deploymentId+'&deploymentName='+ encodeURI(row.resourceName)+'');
        } else if (typ === 'delete') { // 删除
          this.$confirm('确定要删除该流程吗?', '信息', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteInstance()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })        
          })
        }
      },
      // 获取流程实例列表
      async getInstances(item) {
        // console.log(item)
        this.form.pageNum = item && item.pageNum ? item.pageNum : 1
        this.form.pageSize = item && item.pageSize ? item.pageSize : 10
        const { status, obj } = await getInstances(this.form)
        if (status === 0) {
          this.list = obj.list
          this.total = obj.totalNum
        }
      },
      // 挂起流程实例
      async suspendInstance() {
        const { status, msg } = await suspendInstance({
          instanceID: this.tabItem.id ? this.tabItem.id : ''
        })
        if (status === 0) {
          this.$message({
            message: msg,
            type: 'success'
          })
          this.getInstances()
        }
      },
      // 激活流程实例
      async resumeInstance() {
        const { status, msg } = await resumeInstance({
          instanceID: this.tabItem.id ? this.tabItem.id : ''
        })
        if (status === 0) {
          this.$message({
            message: msg,
            type: 'success'
          })
          this.getInstances()
        }
      },
      // 删除流程实例
      async deleteInstance() {
        const { status, msg } = await deleteInstance({
          instanceID: this.tabItem.id ? this.tabItem.id : '',
        })
        if (status === 0) {
          this.$message({
            message: msg,
            type: 'success'
          })
          this.getInstances()
        }
      }
    }
  }
  </script>
  
  <style lang="scss" scoped></style>